<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-02-04 20:43:25
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-07 21:41:08
 * @FilePath: /hei_picture_web/src/page/picture/_search/SeaPicIndex.vue
 * @Description: 图片搜索首页
-->
<template>
  <div class="search-container">
    <a-button type="primary" class="back-button" @click="handleBack">
      <template #icon><LeftOutlined /></template>返回
    </a-button>
    <div class="content-wrapper">
      <a-card hoverable style="width: 300px">
        <template #cover>
          <img :alt="pictureInfo?.name" :src="pictureInfo?.url" />
        </template>
        <a-card-meta :title="pictureInfo?.name" :description="pictureInfo?.introduction">
        </a-card-meta>
      </a-card>
      <div class="similar-images-section">
        <h3>结果:</h3>
        <a-list
          :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }"
          :data-source="imageSearchResult"
          :loading="loading"
        >
          <template #renderItem="{ item: picture, index: index }">
            <a-list-item class="list-item">
              <a-card hoverable class="image-card" :title="`相似图片${index + 1}`">
                <template #extra><a :href="picture.fromUrl" target="_blank">查看来源</a></template>
                <template #cover>
                  <img :alt="picture.name" :src="picture.thumbUrl" class="card-image" />
                </template>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { LeftOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, watchEffect, onMounted } from 'vue'
import { getPictureByIdUsingGet, searchPictureByPictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'
const route = useRoute()
const router = useRouter()
const pictureId = ref(route.query.pictureId)
const loading = ref(false)
const handleBack = () => {
  router.back()
}
const pictureInfo = ref<API.PictureVO>()

const imageSearchResult = ref<API.ImageSearchResult[]>([])

const getPictureInfo = async () => {
  loading.value = true
  const res = await getPictureByIdUsingGet({ id: pictureId.value as string })
  const picture = res.data
  if (picture.code === 200 && picture.data) {
    pictureInfo.value = {
      ...picture.data,
      tags: picture.data.tags ? picture.data.tags.split(',') : undefined,
    }
    await getPictureListByPicture()
  }
  loading.value = false
}

const getPictureListByPicture = async () => {
  const res = await searchPictureByPictureUsingPost({ pictureId: pictureId.value as string })
  const data = res.data
  console.log(data)

  if (data.code === 200 && data.data) {
    imageSearchResult.value = data.data
  } else {
    imageSearchResult.value = []
    message.error(data.message)
  }
}

watchEffect(() => {
  pictureId.value = route.query.pictureId
})
onMounted(() => {
  getPictureInfo()
})
</script>

<style scoped lang="scss">
.search-container {
  padding: 20px;

  .back-button {
    margin-bottom: 20px;
  }

  .original-image-card {
    width: 300px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    }

    :deep(.ant-card-head) {
      background-color: #fafafa;
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
    }
  }

  .similar-images-section {
    margin-top: 20px;
    flex-grow: 1;
  }

  .list-item {
    padding: 8px;
  }

  .image-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }
  }

  .card-image {
    height: 256px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}
</style>
